<template>
  <h1>商品详情表</h1>
  <div style="margin-bottom: 20px">
    <el-descriptions class="margin-top" :column="3" :size="size" border>
      <template #extra> </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">商品名称</div>
        </template>
        {{ prod.prodName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">商品类型</div>
        </template>
        {{ prod.typeName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">品牌</div>
        </template>
        {{ prod.brandName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">单位</div>
        </template>
        <el-tag size="small">{{ prod.unitName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            供应商
          </div>
        </template>
        {{ prod.apprName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">图片</div>
        </template>
        <el-image style="width: 100px; height: 100px" :src="prod.prodImage" />
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <div>
    <el-button type="primary" @click="onSubmitBuy">马上购买</el-button>
  </div>
  <div>
    <span>您的订单金额为 {{ buyAmount }}元</span>
  </div>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="infoId" label="Id" width="180" />
      <el-table-column prop="prodSku" label="Sku" width="180" />
      <el-table-column prop="prodName" label="商品" />
      <el-table-column prop="prodStock" label="库存" />
      <el-table-column prop="alertStock" label="库存预警" />
      <el-table-column prop="prodPrice" label="售价" />
      <el-table-column prop="buyNum" label="购买数量">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.buyNum"
            :min="1"
            :max="scope.row.prodStock"
            @change="handleChange"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" />
    </el-table>
  </div>
  <div>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="searchFrom.pageNum"
        v-model:page-size="searchFrom.pageSize"
        :page-sizes="[2, 4, 5, 6]"
        :size="total"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const tableData = ref([]);
import { ref, onMounted } from "vue";
import { getProdInfoList } from "../api/api";
import type { ComponentSize } from "element-plus";
const multipleSelection = ref<any[]>([]);

const prod = ref({});
const total = ref(0);
const searchFrom = ref({
  pageNum: 1,
  pageSize: 2,
  typeId: null,
});

const buyAmount = ref(0);

/**
 *
 * @param value 马上购买
 */

const onSubmitBuy = () => {
  console.log("购买数量");
};

const handleChange = (value: number | undefined) => {
  console.log("购买数量改变");
  //  计算订单金额
  buyAmount.value = 0;
  // 计算订单金额
  buyAmount.value = 0;
  multipleSelection.value.forEach((item) => {
    buyAmount.value += item.prodPrice * item.buyNum;
  });
};
/**
 * 多选选中
 */
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
  console.log("要购买的商品信息", multipleSelection.value);
  // 计算订单金额
  buyAmount.value = 0;
  multipleSelection.value.forEach((item) => {
    buyAmount.value += item.prodPrice * item.buyNum;
  });
};

/**
 * 描述列表
 */

import { computed } from "vue";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";

/**
 * 分页操作
 */
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  searchFrom.value.pageSize = val;
  listhh();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  searchFrom.value.pageNum = val;
  listhh();
};

const listhh = () => {
  getProdInfoList(searchFrom.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};

onMounted(() => {
  let s = sessionStorage.getItem("buy");
  prod.value = JSON.parse(s);
  searchFrom.value.typeId = prod.value.prodId;
  listhh();
});
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
